<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>transform-guodu2</title>
    <style>
        div
        {
            width:100px;
            height:100px;
            background:yellow;
            transform:width 2s, height 2s;
            -moz-transform: width 2s height 2s，-moz-transform 2s;/* Firefox 4 */
            -webkit-transition: width 2s, height 2s, -webkit-transform 2s;/* Safari and Chrome */
            -o-transform:width 2s, height 2s, -o-transform 2s; /* Opera */
        }
        div:hover
        {
            width:200px;
            height: 200px;
            transform:rotate(180deg);
            -moz-transform:rotate(180deg); /* Firefox 4 */
            -webkit-transform:rotate(180deg); /* Safari and Chrome */
            -o-transform:rotate(180deg); /* Opera */
        }
    </style>
</head>
<body>

<div>请把鼠标指针放到黄色的div元素上，来查看过渡效果。</div>

<p><b>注释：</b>本例在 Internet Explorer中无效。</p>

</body>
</html>